<template>
  <div class="toast" @click.stop="hide">
    <div class="arrow"><slot></slot></div>
    <scroll v-if="show === 'collect' && goods.length" class="scroll">
      <div class="item" v-for="(item, index) in goods" :key="index">
        <img :src="item.image || item.img || item.show.img" class="goods-img"></img>
        <div class="goods-info">
          <div class="title">{{item.title}}</div>
          <span class="price">￥{{item.price}}</span>
        </div>
      </div>
    </scroll>
    <span v-else class="default" @click="nav">收藏列表为空，赶紧去添加吧!</span>

    <img v-if="show === 'app'" src="~assets/img/profile/download.png" class="download">
  </div>
</template>

<script>
  import Scroll from 'components/common/scroll/Scroll'
  import animate from '../../../animate.js'
  export default {
    name: 'Toast',
    methods: {
      hide() {
        this.$emit('hide')
      },
      nav() {
        this.$router.push('/home')
      }
    },
    props: ['show'],
    computed: {
      goods() {
        return this.$store.state.collectGoods
      }
    },
    components: {
      Scroll
    }
  }
</script>

<style scoped>
  .toast {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 100%;
    z-index: 11;

    background-color: rgba(0, 0, 0, 0.4);
  }
  .arrow {
    text-align: center;
  }
  .arrow img {
    width: 40vw;
    height: auto;
    transform: rotate(90deg);
  }
  .scroll {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100vw;
    max-height: 80vh;
    overflow: hidden;
    background-color: white;
  }
  
  .item {
    width: 100vw;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0.2rem;
  }
  .goods-img {
    width: 30%;
    height: auto;
    border-radius: 5%;
  }
  .goods-info {
    width: 70%;
    padding: 0 0.4rem;

  }
  .title {
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    padding: 0.4rem 0;
  }
  .price {
    font-size: 1.5rem;
    color: #ff5777;
    padding: 0.4rem 0;
  }
  .default {
    font-size: 0.8rem;
    color: rgb(148, 197, 159);
    font-style: italic;
    
    white-space: nowrap;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgb(148, 197, 159);

    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
  }
  .download {
    position: absolute;
    width: 70vw;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>